<template>
  <div class="mail">
    <div class="recommend-list">
      <div class="null" v-if="goodsList.length==0">
        暂无商品数据~~
      </div>
      <div class="recommend-item" v-for="(item,index) in goodsList" :key="index" @click="toGoodsDetail(item.id)">
        <div class="item-img">
          <img :src="item.thumb_Url" mode="aspectFit"/>
        </div>
        <div class="item-des">{{item.name}}</div>
        <div class="price">
          <span>￥{{item.s_price}}</span>
          <span class="original">￥{{item.m_price}}</span>
        </div>
        <div class="sale_count">
          月售{{item.sale_count}}
          <img @click.stop="getGoodsDetails(item.id)" class="img"
               src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bifang/caret.png"/>
          <div class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</div>
        </div>
      </div>
    </div>

    <!-- 弹出层 -->
    <div class="mask"  v-if="showModal" @click="hideCart"></div>
    <div class="modalDlg" v-if="showModal">
      <div class="modalDlg_top">
        <img :src="goodsDetail.thumb_url" alt="">
        <div class="modalDlg_top_right">
          <div class="modalDlg_top_right_name">
            <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
            <span>{{goodsDetail.name}}</span>
          </div>
          <div class="cart_price">
            <span>￥{{goodsDetail.s_price}}</span>
            <span>库存：{{goodsDetail.stock}}</span>
          </div>
        </div>
      </div>
      <div class="modalDlo_center">
        <div class="modalDlo_center_tit" v-if="goodsDetail.goods_spu_info.length!=0">规格</div>
        <div class="modalDlo_center_classify">
          <div
            v-for="(item,index) of goodsDetail.goods_spu_info"
            :key="index" @click="select_classify(item,index)"
            :class="{selectClassify:index==classifyIndex}"
          >
            {{item.spu_name}}
          </div>
        </div>
      </div>
      <div class="modalDlo_bottom">
        <count @numberChange="numberChange" :stock="goodsDetail.stock"><div>购买数量</div></count>
      </div>
      <div class="join_cart" @click="addCart">加入购物车</div>
    </div>
    <!-- 弹出层结束 -->
  </div>
</template>

<script>
  import count from '@/components/count'
  export default {
    components:{
      count
    },
    data(){
      return{
        classify_id: '',
        page: 1,
        goodsList: [],
        showModal: false,
        goodsDetail: '',
        classifyIndex: -1,
        classifyId: '',
        num:1,//购买商品数量
        goods_id: '',
        id: ''//商品分类id
      }
    },
    onLoad(query){
      this.classify_id = query.classify_id;
    },
    onShow(){
      let num = this.page;
      let _this = this;
      for (let i=0;i<num;i++){
        _this.page = i+1;
        _this.getGoodsList()//获取商品数据
      }
    },
    onReachBottom() {
      this.page++;
      this.getGoodsList()
    },
    onShareAppMessage() {
      return {
        title: '汉唐必方',
        desc: '',
      }
    },
    methods:{
      async getGoodsList() {
        let res = await this.$request.getData('/goods/getGoodsList', {
          classify_id: this.classify_id,
          limit: 10,
          page: this.page,
          type: 'common',
          user_token: wx.getStorageSync('userToken')
        })
        if (res.data.level == 'success') {
          if (this.page == 1){
            this.goodsList = res.data.data;
          } else {
            if (res.data.data.length==0){
              this.page--;
            } else {
              this.goodsList = this.goodsList.concat(res.data.data);
            }
          }
        }
      },
      async getGoodsDetails(id){
        if (id != this.id){
          this.classifyId = '';
          this.classifyIndex = -1;
        }
        let res=await this.$request.getData('/goods/getGoodsDetails',{goods_id:id})
        if(res.data.level=='success'){
          this.goodsDetail = res.data.data;
          this.goods_id = id;
          this.num=1;
          this.showModal = true;
        }
      },
      select_classify(item,index){//选择规格
        this.classifyIndex=index
        this.classifyId=item.id
        this.$set(this.goodsDetail,'stock',item.stock)
        this.$set(this.goodsDetail,'s_price',item.price)
      },
      numberChange(num){
        this.num=num
      },
      async addCart(){//添加到购物车
        const _this=this
        if(this.num<=0){
          this.$currency.showToast('购买数量不能为0');
          return
        }else if(this.classifyId==''){
          this.$currency.showToast('先选择规格吧');
          return
        }
        var userToken=wx.getStorageSync('userToken')
        let res=await this.$request.postData('/goods/addShopCart',{
          goods_id:this.goods_id,
          num:this.num,
          user_token:userToken,
          goods_spu_id:this.classifyId
        })
        wx.showLoading()
        if(res.data.level=='success'){
          _this.$currency.showToast('成功加入购物车','success',1500);
          _this.showModal=false;
          _this.classifyId = '';
          _this.classifyIndex = -1;
          let num = _this.page;
          for (let i = 0; i< num ; i++){
            _this.page = i+1;
            _this.getGoodsList()
          }
          wx.hideLoading();
        }else{
          wx.hideLoading({success:function(){
              _this.$currency.showToast(res.data.message,'none',1500)
            }});

        }
      },
      hideCart(){
        this.showModal = false;
        this.goodsDetail = '';
      },
      toGoodsDetail(id) {
        wx.navigateTo({url: '/pages/goodsDetail/main?id=' + id})
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/css/mixin";
  .mail {
    width: 100%;
    padding-top: 10rpx;
  }
  .recommend-list{
    @include flexWrap(flex-start,flex-start);
    flex-direction: row;
    width: 100vw;
    margin-top: 10rpx;
    /*background: #ffffff;*/
    .null{
      width: 100%;
      padding: 60rpx 0;
      text-align: center;
      font-size: 34rpx;
      color: #959595;
      height: 100rpx;
      line-height: 100rpx;
    }
    .recommend-item{
      width: calc(((100% - 40rpx)/2) - 40rpx);
      padding: 20rpx;
      margin-right: 40rpx;
      margin-bottom: 40rpx;
      /*border-radius: 16rpx;*/
      overflow: hidden;
      background: #ffffff;
      @include flex();
      flex-direction: column;
      .item-img{
        width: 100%;
        height: 300rpx;
      }
      .item-des{
        height: 80rpx;
        line-height: 80rpx;
        width: 100%;
        @include ellipsis(1);
      }
      .price{
        font-size: 26rpx;
        @include flex(flex-start,flex-end);
        flex-direction: row;
        height: 30rpx;
        width: 100%;
        color: #e12317;
        .original{
          font-size: 22rpx;
          color: #707070;
          text-decoration: line-through;
          padding-left: 20rpx;
        }
      }
      .sale_count{
        position: relative;
        font-size: 24rpx;
        color: #b2b2b2;
        width: 100%;
        height: 40rpx;
        line-height: 40rpx;
        @include flex(flex-start);
        .img{
          margin-left: auto;
          width: 40rpx;
          height: 40rpx;
        }
        .img-icon{
          position: absolute;
          bottom: 20rpx;
          right: 0;
          width: 20rpx;
          height: 20rpx;
          background: #e12317;
          border-radius: 360rpx;
          color: #ffffff;
          font-size: 18rpx;
          text-align: center;
          line-height: 20rpx;
        }
      }
    }
    .recommend-item:nth-child(even){
      margin-right: 0;
    }
  }

  /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
  }
  .modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
  }

  .modalDlg_top{
    padding:5px;
    padding-right:25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;

  }
  .modalDlg_top>img{
    width:80px;
    height: 80px;
  }
  .modalDlg_top_right{
    margin-left:20px;
    width:200px;
  }
  .modalDlg_top_right_name{
    display: flex;
    align-items: center
  }
  .modalDlg_top_right_name_tag{
    color:purple;
    display: inline-block;
    width:50px;
    text-align: center;
    border:1px solid purple;
    font-size: 10px;
    border-radius: 5px;
    margin-right:5px;
  }
  .modalDlg_top_right_name_tag+span{
    width:200px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .modalDlo_bottom{
    margin-left:5px;
  }
  .cart_price{
    margin-top:15px;
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  .cart_price>span:nth-child(1){
    color:red;
  }

  .modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
    width:100%;
  }
  .modalDlo_center_classify{
    display:flex;
    align-items: center;
    flex-wrap:wrap;
    margin:10px 0;
    padding-bottom: 20px;
  }
  .modalDlo_center_classify>div{
    border:1px solid #eee;
    padding:2.5px 5px;
    border-radius: 5px;
    margin-left:5px;
    text-align: center;
  }
  .modalDlo_center_tit{
    padding-left:10px;
  }
  .join_cart{
    width:100%;
    background: rgb(196, 75, 75);
    color:#fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    position: absolute;
    bottom:0;
  }
  button::after {
    border: none;
  }
  button {
    background-color: #fff;
    line-height: 16px;
    font-size: 10px;
    border-radius:0;
  }
  /* 规格 */
  .selectClassify{
    border:red 1px solid !important;
    color:red;
  }
</style>
